<template>
	<view>
		<u-navbar class="navbar" :is-back="false" :is-fixed="true">
			<search style="width: 100%" />
		</u-navbar>

		<view class="swiper-box mx-1 pt-2 rounded overflow-hidden">
			<swiper style="height: 350rpx;" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
				:duration="500" indicator-active-color="#e87722" indicator-color="#ffffff">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper-item uni-bg-red">
						<image class="bgeff3f8 rounded" :src="item.image" mode="aspectFill" style="width: 100%;height: 350rpx;"
							@tap="navTo(`/pages/navigation/searchPage?category=${item.weigh}`)">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="menu-list bg-white mx-1 rounded mt-2">
			<view class="menu-item" v-for="(item, index) in categoryList" :key="index"
				@click="navTo(`/pages/navigation/searchPage?category=${item.id}`)">
				<view class="flex align-center justify-center">
					<u-image width="88rpx" height="88rpx" class="menu-img" borderRadius="10" :src="item.image">
						<u-loading slot="spinner-cycle"></u-loading>
					</u-image>
				</view>
				<view class="menu-title">{{ item.gd_c_name }}</view>
			</view>
		</view>

		<view class="mt-2">
			<u-tabs :list="navList" :current="tabCurrentIndex" inactive-color="#333" active-color="#e87722"
				bg-color="transparent" @change="tabClick"></u-tabs>
		</view>
		<view class="goods-list mt-2">
			<view class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index"
				@click="navTo(`/pages/product/product?id=${item.id}&goodsId=${item.id}`)">
				<view class="goods-img">
					<u-image v-if="item.main_image" :src="item.main_image" height="350rpx" mode="aspectFill" width="100%">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<u-image v-else src="/static/logo.png" height="350rpx" mode="aspectFill" width="100%">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="goods-desc">
					<view class="goods-title">
						{{ item.goods_name }}
					</view>
					<view class="goods-bottom">
						<view class="goods-price flex align-center fs-40">
							¥<span>{{item.day_amount}}</span>/日
							<text class="ml-1 fs-28 mt-1">起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty class="w-100" v-if="goodsList.length == 0"></u-empty>
	</view>
</template>

<script>
	import {
		getBannerList
	} from "@/api/home.js"
	import {
		getCategoryList,
		getGoodsList
	} from "@/api/goods.js"
	import {
		publicWeb
	} from "@/api/common.js";
	import {
		getUserInfo
	} from "@/api/members.js";
	import search from './components/search.vue'
	import storage from "@/utils/storage";
	export default {
		components: {
			search
		},
		data() {
			return {
				bannerList: [],
				categoryList: [],
				goodsList: [],
				refresh: false,
				navList: [],
				tabCurrentIndex: 0
			}
		},
		onShow() {
			console.log('show')
			const address = uni.getStorageSync('selectCurrentAddress')
			this.$store.commit('setcurrentAddress', address)
			if (this.goodsList.length) {
				this.getGoodsList()
			}
			const token = storage.getAccessToken();
			if (token) {
				this.getInfo()
			}
		},
		onPullDownRefresh() {
			this.refresh = true
			uni.showLoading()
			this.getBannerList()
			this.getCategoryList()
			this.publicWeb()
		},
		onReachBottom() {
			if (this.navList[this.tabCurrentIndex].tempList < 20) return;
			this.navList[this.tabCurrentIndex].page++;
			this.getGoodsList()
		},
		mounted() {
			uni.setTabBarItem({
				index: 2,
				text: '关于'
			})
			this.publicWeb()
			this.getBannerList()
			this.getCategoryList()
		},
		methods: {
			publicWeb() {
				publicWeb().then(res => {
					const data = res.data
					Object.keys(data).forEach(key => {
						if (data[key] == 0) {
							data[key] = false
						}
					})
					uni.setStorageSync('publicWeb', data)
					if (data.merchant_display) {
						uni.setTabBarItem({
							index: 2,
							text: '商家'
						})
					} else {
						uni.setTabBarItem({
							index: 2,
							text: '关于'
						})
					}
				})
			},
			getInfo() {
				getUserInfo().then((res) => {
					const data = res.data
					if (data) {
						storage.setUserInfo(data);
					}
				});
			},
			tabClick(index) {
				this.tabCurrentIndex = index
				this.navList[this.tabCurrentIndex].page = 1
				this.getGoodsList()
			},
			getBannerList() {
				getBannerList().then(res => {
					this.bannerList = res.data
					// console.log(this.bannerList)
				})
			},
			getCategoryList() {
				getCategoryList({
					is_home: 1
				}).then(res => {
					this.categoryList = res.data.list
					this.navList = res.data.list.map(item => {
						return {
							name: item.gd_c_name,
							id: item.id,
							page: 1,
							tempList: []
						}
					})
					this.getGoodsList()
				})
			},
			getGoodsList() {
				getGoodsList({
					page: this.navList[this.tabCurrentIndex].page,
					limit: 20,
					goods_classify_id: this.navList[this.tabCurrentIndex].id
				}).then(res => {
					const list = res.data.list || []
					this.navList[this.tabCurrentIndex].tempList = list
					if (this.navList[this.tabCurrentIndex].page == 1) {
						this.goodsList = list
					} else {
						this.goodsList = this.goodsList.concat(list)
					}
					if (this.refresh) {
						uni.hideLoading()
						uni.stopPullDownRefresh();
						this.refresh = false
					}

					console.log(this.goodsList)
				})
			},

			navTo(url) {
				uni.navigateTo({
					url,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	$w_94: 94%;

	.menu-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		>.menu-item {
			text-align: center;
			width: 20%;
			margin: 20rpx 0;
		}

		.menu-img {
			display: flex;
			margin: 0 auto;
		}

		.menu-title {
			font-size: 24rpx;
		}
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.goods-item {
			width: 50%;
			margin-bottom: 10px;
			border-radius: 0.4em;
			overflow: hidden;
		}

		.goods-img {
			position: relative;
			margin: 0 auto;
			// width: 158px;
			width: $w_94;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.goods-desc {
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			width: $w_94;
			background: #fff;
			padding: 8rpx 0 8rpx 8rpx;
			margin: 0 auto;

			>.goods-title {
				font-size: 32rpx;
				height: 80rpx;
				display: -webkit-box;
				font-weight: 500;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			>.goods-bottom {
				display: flex;
				font-weight: bold;

				>.goods-price {
					line-height: 2;
					color: $main-color;

					>span {
						font-size: 42rpx;
					}
				}
			}
		}
	}
</style>